<template>
  <view class="container">
    <view class="order-preview" style="font-size: 16px;" id="printableArea">
      <view class="shop-name" style="font-size: 50px;margin-bottom: 40px;margin-top: 13px;">处 方 笺</view>
      <view class="order-summary" style="font-size: 16px;">
        <text>No<span style="color:brown;">{{prescriptionNumber}}</span></text>
      </view>
      <view class="order-info">
        <view class="info-item">
          <text>科别</text><text>费别</text><text>门诊号</text><text>{{currentDate}}</text>  <!-- 改为数据绑定 -->
        </view>
        <view class="info-item">
          <text>姓名 {{ order.member_name }}</text>
          <text class="age-text">年龄<span style="padding-left: 2em; /* 调整这个值来控制间距 */">岁</span></text>
          <text><span class="gender-space">性别</span><span class="gender-space">男</span><span class="gender-space">女</span></text>
        </view>
        <view class="info-item">
          <text>住址/电话</text><text><span style="margin-right: 150px;">过敏史</span></text>
        </view>
        <view class="info-item">
          <text>临床诊断</text><text>{{ order.note }}</text>
        </view>
      </view>
      <view class="order-items">
        <view class="item-header">
          <text class="item-name">商品名称</text>
          <text class="item-quantity">数量</text>
          <text class="item-price">单价</text>
          <text class="item-total">小计</text>
        </view>
        <view v-for="item in items" :key="item.id" class="order-item">
          <text class="item-name">{{ item.product_name }}</text>
          <text class="item-quantity">{{ item.quantity }}</text>
          <text class="item-price">￥{{ item.price }}</text>
          <text class="item-total">￥{{ item.total }}</text>
        </view>
      </view>
      <view class="order-info footer-section">
        <view class="info-item">
          <text>医师 {{ order.operator }}</text><text>审核</text><text><span style="margin-right: 90px;">金额 {{ order.total_amount }}</span></text>
        </view>
        <view class="info-item">
          <text>调配</text><text>核对</text><text><span style="margin-right: 150px;">发药</span></text>
        </view>
      </view>
    </view>

    <view class="order-header">
      <uni-button type="primary" @click="printReceipt">打印处方</uni-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      order: {},
      items: [],
      orderId: null,
      currentDate: '',  // 添加当前日期数据
      prescriptionNumber: '', // 添加处方号字段
    };
  },
  computed: {
    totalQuantity() {
      return this.items.reduce((sum, item) => sum + item.quantity, 0);
    }
  },
  methods: {
    generatePrescriptionNumber() {
      const now = new Date();
      // 生成基于日期的7位数字
      // 格式：YYMMDD + 随机1位（确保7位数）
      const year = now.getFullYear().toString().slice(-2); // 取年份后两位
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const randomNum = Math.floor(Math.random() * 1000); // 0-9随机数
      
      this.prescriptionNumber = `${month}${day}${randomNum}`;
    },
    async fetchOrderDetails() {
      const res = await this.$myRuquest({
        url: '/index/plugin.orders/getOrderDetails',
        method: 'GET',
        data: {
          order_id: this.orderId
        }
      });

      if (res.data.code === 200) {
        this.order = res.data.data.order;
        this.items = res.data.data.items;
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000
        });
      }
    },
    getCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      this.currentDate = `${year} 年 ${month} 月 ${day} 日`;  // 赋值给data中的currentDate
    },
    printReceipt() {
      const printContent = document.getElementById('printableArea').innerHTML;
      const originalContent = document.body.innerHTML;

      document.body.innerHTML = printContent;
      window.print();
      document.body.innerHTML = originalContent;
      window.location.reload();
    }
  },
  onLoad(options) {
    this.orderId = options.order_id;
    this.getCurrentDate();  // 在onLoad中调用获取日期
    this.generatePrescriptionNumber(); // 生成处方号
    this.fetchOrderDetails();
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  //justify-content: center;
  padding: 20px;
  height: 100vh;
  background-color: #fff;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.order-preview {
  margin-top: 10px;
  width: 130mm;
  min-height: 170mm;
  padding: 30px;
  font-size: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  position: relative;
  padding-bottom: 100px; /* 为底部内容留出空间，防止被遮挡 */
}

.shop-name {
  text-align: center;
  font-size: 12px;
  /* font-weight: bold; */
  margin-bottom: 10px;
}

.order-info {
  margin-bottom: 10px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  border-bottom: 1px solid currentColor; /* 自动使用当前文字颜色 */
  padding-bottom: 2px; /* 控制下划线与文字的间距 */
  font-weight: bold;
}

.order-items {
  margin-bottom: 10px;
}

.item-header, .order-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;
}

.item-name, .item-quantity, .item-price, .item-total {
  width: 25%;
  text-align: center;
}

.order-summary {
  font-size: 12px;
  font-weight: bold;
  text-align: right;
}

.order-summary text {
  display: block;
  text-align: right;
}

@media print {
  .container, .order-header {
    display: none;
  }
  .order-preview {
    margin: 0;
  }
}
.gender-space {
  padding: 0 1em; /* 男女之间的间距 */
}
.footer-section {
  position: absolute;
  bottom: 30px; /* 调整这个值来控制距离底部的间距 */
  width: calc(100% - 60px); /* 减去左右padding */
  left: 30px; /* 与容器的padding-left一致 */
}

</style>
